Day29:網頁開發學習之路-RWD(響應式網頁）

2022 iThome 鐵人賽

DAY 29

自我挑戰組

網頁開發（html.css）系列第 29 篇

14th鐵人賽

claireyang

2022-09-29 18:28:49

1566 瀏覽

分享至

RWD（Responsive Web Design）響應式網頁設計
是在同一個網頁、同一HTML文件中，網頁會遵從CSS的設定，依照不同的裝置寬度
產生不同的版面變化，就像下圖一樣

不管是在電腦、平板、手機上觀看，版面的文字大小、行距、排版，都會依據使用的裝置不同而有所變化
使用者在不同的裝置上觀看，都不會影響網頁的排版，除了可以降低維護成本，也可提升使用者的體驗

(圖片來源Flaticon logo)

要將網頁使用RWD的方式設定，步驟如下:

1.設定 viewport

這個步驟非常重要，一定要記得！！！設定方式為在<head> 加上

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

2.決定 RWD 設計模式

先決定要以手機設定為優先載入頁面，或是以桌機優先載入頁面
目前手機裝置的使用比率較高，可考慮把手機設定為優先載入頁面，這樣有助於縮短網頁載入的時間，讓體驗更順利
再來就是先觀察螢幕大小在多少的時候版面會跑版走樣，再依據螢幕大小來調整畫面中的元素呈現方式
以下為RWD常用的3個裝置解析度：

桌上型電腦：至少要1024px以上
平板電腦：720px～1024px
手機：320px～720px

3.套用 CSS media query

舉例一、想要在螢幕最大寬度小於800px的時候，將字體放大且改變文字和背景的顏色

＠media screen and(max-width:800px){
     h1{
     font-size:12px
     }
     div{back

舉例二、先設定一個適合在手機上觀看的頁面，但因為還沒有套用media query
所以不管畫面如何縮小放大，或是在其他不同的終端設備上觀看，都會是顯示以下的呈現

接下來再套用 CSS media query調整畫面
以下規則是螢幕最小寬度為780px(換句話說也就是螢幕大小超過780px)
就會將.container的dispaly屬性調整為flex(橫向），每一個.item的寬度是 33.3%，高度是畫面的30%，

<style>
      @media screen and (min-width: 780px) {
        .container {
          display: flex;
          justify-content: center;
        }
        .item {
          width: 33.3%;
          height: 30vh;
          margin: 1rem;
        }
      }
    </style>

設定完成之後一定要記得檢查網頁在不同終端顯示的狀況是否正常
檢查方式可以從滑鼠右鍵選擇檢查或F12，再點選下圖紅色圈圈中的圖示
就可以依據不同的終端顯示你設定完的網頁

* 使用相對單位設定寬高、大小

單位	說明
vh	view height，是螢幕可視範圍高度的百分比
vw	view width，螢幕可視範圍寬度的百分比
em	該元素以倍數乘以父元素(上一層)的px值。
rem	該元素以倍數乘以根元素(html)的px值。
%	該元素以百分比乘以父元素(上一層)的px值。